<template>
	<div class="top_con">
		<a-button type="primary" @click="addThis">创建标签分组</a-button>
	</div>
	<a-table style="margin-top: 10px;" :loading="tableLoading" :dataSource="tableList" :columns="tabColumns" :pagination="pagination" @change="handleTableChange">
		<template #bodyCell="{ column, record }">
			<template v-if="column.key === 'operate'">
				<a-button type="link" @click="addThis(record)">编辑</a-button>
				<a-divider type="vertical" />
				<a-popconfirm
				    title="确定删除此项吗?"
				    ok-text="是"
				    cancel-text="否"
				    @confirm="deleteThis(record)"
				    @cancel="()=>{}">
				    <a-button type="link">删除</a-button>
				</a-popconfirm>
			</template>
		</template>
	</a-table>
	<addLabel :visible="addVisible" :labelInfo="labelInfo" @close="handleAddClose" />
</template>

<script>
	import {
		defineComponent,
		ref,
		reactive,
		toRefs
	} from 'vue';
	import request from "@/common/utils/request";
	import addLabel from './modules/addLabel.vue';
	import {message} from 'ant-design-vue';
	export default defineComponent({
		components: {
			addLabel
		},
		setup(props, context) {
			const state = reactive({
				pagination: {
					total: 0,
					pageSize: 10,
					current: 1
				},
				tableList: [],
				tabColumns: [{
					title: '分组名称',
					dataIndex: 'name',
					key: 'name',
				}, {
					title: '排序',
					dataIndex: 'sort',
					key: 'sort',
				}, {
					title: '操后编辑时间',
					dataIndex: 'updated_at',
					key: 'updated_at',
				}, {
					title: '操作',
					dataIndex: 'operate',
					key: 'operate',
				}],
				
				addVisible: false,
				labelInfo: {},
				tableLoading: false
			})
			
			const getTableList = () => {
				state.tableLoading = true
				request.get('/work_ai', '/user/shotstack/multimedia/tagGroupList', {
					page: state.pagination.current,
					pageSize: state.pagination.pageSize
				}).then(res=> {
					state.tableLoading = false
					state.tableList = res.result.data
					state.pagination.total = res.result.total
				}).catch(err=>{
					state.tableLoading = false
				})
			}
			
			getTableList()
			
			const handleTableChange = ({current, pageSize}) => {
				state.pagination.current = current
				state.pagination.pageSize = pageSize
				getTableList()
			}
			
			const handleAddClose = (flag) => {
				state.addVisible = false
				state.labelInfo = {}
				if(flag){
					getTableList()
				}
			}
			
			const addThis = (record = {}) => {
				if(record){
					state.labelInfo = record
				} else {
					state.labelInfo = {}
				}
				state.addVisible = true
			}
			
			const deleteThis = (record) => {
				request.del('/work_ai', '/user/shotstack/multimedia/tagGroup', {id: record?.id}).then(res=> {
					message.success('删除成功！')
					getTableList()
				})
			}
			
			return {
				...toRefs(state),
				handleTableChange,
				handleAddClose,
				deleteThis,
				addThis
			}
		}
	})
</script>

<style lang="less" scoped>
	.search_con{
		margin-top: 10px;
	}
</style>